<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .wrapper {
        height: 200px;
        width: 200px;
        background-color: aqua;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div>
      事件监听
      <button
        id="b"
        onkeydown="a = a+1,console.log(a);console.log(event)"
        onclick="a = a+1;console.log(a);console.log(event)"
      >
        按钮
      </button>
      <div class="wrapper"></div>
    </div>
    <div>事件冒泡和捕获</div>
  </body>
  <script>
    // 事件监听
    let a = 1;
    const b = document.getElementById("b");
    b.addEventListener("keydown", (e) => {
      console.log(e);
      a = a + 1;
      console.log(a);
    });
  </script>
  <script></script>
</html>
